<template>
  <div style="margin-bottom: 100px">
    <div style="margin: 20px ;font-size: 20px; color: blue">考试列表</div>
    <div style="border:1px solid #ccc;border-radius: 10px ; margin: 10px; padding-bottom: 10px" v-for="item in tableData" :key="item.id" >
         <div style="color: #333333; padding: 10px;font-size: 20px">{{item.name}}</div>
         <div style="color: #666; padding: 10px">
           <span>教室{{item.room}}</span>
           <span style="margin-left: 20px">时间：{{item.time}}</span>
           <span style="margin-left: 20px">考试状态：{{item.state}}</span>
           <span style="margin-left: 20px">监考老师：{{item.teacher}}</span>
          </div>
      <div>
        <el-button style="margin-left: 20px; " type="primary" @click="sign(item.id)">报名</el-button>
        <el-button style="margin-left: 20px; " type="primary" @click="doPaper(item.id)" v-if="item.enable && item.state==='进行中'">开始考试</el-button>
      </div>
    </div>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      name:"",
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      paperId:null
    }
  },
  created() {
    this.load()
  },
  methods: {
    doPaper(examId){
      this.$router.push('/front/paper?examId=' +examId)
    },
    sign(examId){
      let   form={userId:this.user.id, examId:examId}
      this.request.post("/signs", form).then(res => {
        if (res.code === '200') {
          this.$message.success("报名成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    load() {
      this.request.get("/exam/page/front", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    save() {
      this.request.post("/exam", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
  }
}
</script>

<style>

</style>
